<template>
  <!-- 数据字典管理 -->
  <div class="main" style="display: flex;">
    <div class="main_left_t" :style="styles_left.type?styles_left.open:styles_left.close">
      <div class="main_right_t_in" >
        <!-- 搜索 -->
        <searchComponents 
        :searchData="dataModel"
         @searchCallBack="searchCallBack"
         ></searchComponents>
        <el-button
          style="float:right;margin:35px;"
          type="primary"
          size="mini"
          plain
          @click="sunS_F"
        >搜索</el-button>
        <div style="border-top:1px solid #E6E6E6;padding:0px 20px;"></div>
        <div style="padding: 25px 30px;">
          <!--添加和批量删除组件-->
          <!-- <buttonhurdle
            class="buttonhurdle"
            :diaDataAdd="dataModel"
            @toAdd="toAdd"
            @toDelete="toDelete"
          ></buttonhurdle> -->
          <addComponent
        :diaDataAdd="dataModel"
         @toAdd="toAdd"
        ></addComponent>
        </div>
      </div>
      <div class="out" style="padding:0px 20px">
        <!--数据列表 @selection-change="handleSelectionChange"-->
        <el-table
          ref="multipleTable"
          :data="dataAttribute"
          @current-change="tableCurrentChange"
          v-loading.body="false"
          border
          fit
          class="elTable"
          highlight-current-row
          size="mini"
          :cell-style="{padding:'5px 0'}"
          style="width:100%"
        >
          <!-- <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="55"></el-table-column> -->
          <el-table-column
            align="center"
            v-for="item in TableDataModel"
            :key="item.id"
            :label="item.CN"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span v-if="item.EN=='type'&&scope.row[item.EN]=='1'">生产厂商</span>
              <span v-else-if="item.EN=='type'&&scope.row[item.EN]=='2'">经销商</span>
              <span v-else-if="item.EN=='type'&&scope.row[item.EN]=='3'">自来水公司</span>
              <span v-else>{{scope.row[item.EN]}}</span>
            </template>
          </el-table-column>
          <el-table-column width="200" align="center" label="操作">
            <template slot-scope="scope">
              <!-- 查看按钮 -->
              <el-button
                style="color:#0B9AC3;border:none;"
                icon="el-icon-view"
                circle
                @click="makeExaId(scope.row)"
              ></el-button>
              <!-- 修改组件 -->
              <modificationi
                class="inline_block"
                :attributeOrder="dataModel"
                :modData="scope.row"
                @modifyData="modifyData"
              ></modificationi>
              <!-- 删除按钮 -->
              <el-button
                style="color:#C90010;border:none;"
                icon="el-icon-delete"
                circle
                @click="deleteList(scope.row.id)"
              ></el-button>
              <!-- 查看类型 -->
              <el-button
                style="color:#C90010;border:none;"
                icon="el-icon-search"
                circle
                @click="typeFuns(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagetotal"
        ></el-pagination>
      </div>

      <!-- 查看组件 -->
      <examine
        :DialogVisibleMod="DialogVisibleExamine"
        :modData="examineData"
        :attributeOrder="dataModel"
        @examineDialog="examineDialog"
      ></examine>
    </div>
    <div class="main_right_t" :style="styles_left.type?style_right.open:style_right.close">
      <right
        :rightHurdleData="rightHurdleData"
        :penetrateId="penetrateId"
        @rightSwitch="rightSwitch"
      ></right>
      <!-- <right
        v-if="rightHurdleData.length>0"
        :rightHurdleData="rightHurdleData"
        @choiceReturn="choiceReturn"
        @forDeleteData="forDeleteData"
      ></right> -->
    </div>
  </div>
</template>
<script>
//引入按钮栏
import buttonhurdle from "@/views/components/FLPage/buttonhurdle";
import addComponent from "@/views/components/FLPage/addComponent";
//引入修改组件
import modificationi from "@/views/components/FLPage/modificationi";
//引入查看组件
import examine from "@/views/components/FLPage/examine";
//引入搜索组件
import searchComponents from "@/views/components/FLPage/searchComponents";
//引入弹窗表格
import right from "./right";
//引入API
import {
  //左侧分页
  LeftSearchPageSize, //分页
  deletetSTypegroup, //删除
  addSTypegroup,//左侧添加
  //y右侧.....................................
  addList, //增加
  deleteList, //单项删除
  rightSearchPageSize, //分页查询
  putList, //修改
  getList,//查看
  getFindRight,//查看类型
  putSTypegroup,
  //根据ID获取
} from "@/api/TenantRoleManagement";
export default {
  components: {
    buttonhurdle,
    modificationi,
    examine,
    searchComponents,
    right, //左侧表格弹窗
    addComponent
  },
  data() {
    return {
      //左侧动画
      styles_left:{
        type:false,
        close:'width: 100%;transition: 0.3s;',
        open:'width: 800px;transition: 0.3s;'
      },
      //右侧动画
      style_right:{
        type:true,
        open:"flex: 100;background:#F0F4FA;transition: 0.3s;",
        close:"width: 0px;transition: 0.3s;overflow: hidden;"
      },
      penetrateId:undefined,
      menuTrigger: "",
      //搜索
      searchContent: {
        typeCode:"",
        createDate:undefined,
      },
      //后端传来的数据
      dataAttribute: [],
      //分页
      currentPage: 1, //当前页
      pagesize: 10, //每页条数
      pagetotal: 0, //总条数
      //左边菜单-----------------------------------
      rightHurdleData: [
        // {
        //   id: "",
        //   typeGroupCode: "",
        //   typeGroupName: "",
        //   createDate: "",
        //   createName: ""
        // }
      ],
      //查看的数据
      examineData: {},
      //查看的弹窗控制器
      DialogVisibleExamine: false,
      //表格中选中的数组
      multipleSelection: [],
      //数据模型
      dataModel: [
        {
          EN: "id",
          CN: "编号",
          value: "",
          type: "input",
          option: [],
          typeFrom: "string",
          Exp: "",
          err: "",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: false
        },
        // {
        //   EN: "typeCode",
        //   CN: "状态码",
        //   value: "",
        //   type: "input",
        //   option: [],
        //   typeFrom: "string",
        //   Exp: "",
        //   err: "",
        //   result: true,
        //   sign: true,
        //   searchSign: true,
        //   addSign: false,
        //   tableSign: true,
        //   examineSign: true,
        //   examineDisabled: false,
        //   modificationSign: true
        // },
        // {
        //   EN: "typeGroupId",
        //   CN: "类型组Id",
        //   value: "",
        //   type: "input",
        //   option: [],
        //   typeFrom: "string",
        //   Exp: "",
        //   err: "",
        //   result: true,
        //   sign: true,
        //   searchSign: false,
        //   addSign: false,
        //   tableSign: false,
        //   examineSign: false,
        //   examineDisabled: false,
        //   modificationSign: false
        // },
        {
          EN: "typeGroupName",
          CN: "字典名称",
          value: "",
          type: "input",
          option: [],
          typeFrom: "string",
          Exp: "",
          err: "",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        },
        {
          EN: "typeGroupCode",
          CN: "字典编号",
          value: "",
          type: "input",
          option: [],
          typeFrom: "string",
          Exp: "",
          err: "",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        },
        {
          EN: "createDate",
          CN: "创建时间",
          value: "",
          type: "date",
          option: [],
          typeFrom: "string",
          Exp: "",
          err: "",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: true,
          examineDisabled: true,
          modificationSign:false
        },
        {
          EN: "createName",
          CN: "创建人",
          value: "",
          type: "input",
          option: [],
          typeFrom: "string",
          Exp: "",
          err: "",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: true,
          examineSign: true,
          examineDisabled: true,
          modificationSign: false
        },
        
        
      ],
      //传入leftTable组件的数据
      forLeftTableData: [],
      //表格单选数据
      currentRow: null
    };
  },
  computed: {
    //解决v-for v-if在同一标签警告问题
    TableDataModel() {
      let new_DataModel = JSON.parse(JSON.stringify(this.dataModel));
      for (let i = 0; i < new_DataModel.length; i++) {
        if (!new_DataModel[i].tableSign) {
          console.log("-------------计算属性-----------");
          new_DataModel.splice(i, 1);
        }
      }
      return new_DataModel;
    }
  },
  created() {
    this.LSPS(1, 10,this.searchContent);
    this.forData(this.currentPage, this.pagesize, this.searchContent);
    console.log("___________44________");
    console.log(this.dataAttribute);
  },
  methods: {
    //组件三角形通知关闭右侧表格
    rightSwitch(val){
      console.log(val)
      //恢复初始比例
      this.styles_left.type=false
    },
    //左分页
    LSPS(page, size,obj) {
      console.log(obj)
      // debugger
      LeftSearchPageSize(page, size,obj).then(response => {
        console.log("左分页接口");

        if (response.data.list.length > 0) {
          //dataAttribute
          this.dataAttribute = response.data.list;
        }
       
      });
    },
    //左单选返回
    choiceReturn(valRow) {
      console.log(valRow);
      console.log("左单选返回")
    },
    //左删除
    forDeleteData(valRow) {
      console.log(valRow);
      console.log('删除！')
      this.$confirm("确认删除？")
        .then(_ => {
          deletetSTypegroup(valRow.id)
            .then(response => {})
            .catch(() => {
              alert("删除失败!");
            });
          done();
        })
        .catch(_ => {});
    },
    //表格单选
    tableCurrentChange(val) {
      this.currentRow = val;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      //传递删除的参数
      this.deleteDataList = val;
    },
    //查看关闭弹窗
    examineDialog(dialogVisibleMod) {
      this.DialogVisibleExamine = false;
    },
    //分页查询
    forData(page, size, content) {
      LeftSearchPageSize(page, size, content).then(response => {
        this.dataAttribute = JSON.parse(JSON.stringify(response.data.list));
      });
    },
    //分页
    handleSizeChange(val) {
      console.log("每页 " + val + " 条");
      this.forData(this.currentPage, val, this.searchContent);
    },
    handleCurrentChange(val) {
      console.log("当前页: " + val);
      this.forData(val, this.pagesize, this.searchContent);
    },
    //查询组件回调
    searchCallBack(newData) {
      let obj = {};
      for (let i = 0; i < newData.length; i++) {
        obj[newData[i].EN] = newData[i].value;
      }
      this.searchContent = obj;
    },
    //搜索
    sunS_F() {
      //console.log(this.searchContent); //用这组数据去ajax查询
      this.forData(this.currentPage, this.pagesize, this.searchContent);
    },
    //增加
    toAdd(toAddData) {
      console.log("toAddData");
      console.log(toAddData);
      let obj = {};
      for (let i = 0; i < toAddData.length; i++) {
        obj[toAddData[i].EN] = toAddData[i].value;
      }
      let cjobj={}
      cjobj['createName']=obj['createName']
      cjobj['typeGroupName']=obj['typeGroupName']
      addSTypegroup(cjobj)
        .then(response => {
          this.forData(this.currentPage, this.pagesize, this.searchContent);
          this.$message({
            message: "添加成功",
            type: "success"
          });
        })
        .catch(() => {
          this.$message.error("添加失败");
        });
    },
    //单项删除
    deleteList(id) {
      console.log(id);
      let arrId = [id];
      this.$confirm("确认删除？")
        .then(_ => {
          deletetSTypegroup(arrId).then(response => {
            this.forData(this.currentPage, this.pagesize, this.searchContent); //刷新列表
          });
          done();
        })
        .catch(_ => {});
    },
    //查看类型
    typeFuns(id){
      console.log('查看类型')
      this.styles_left.type=true //左边变窄
      this.penetrateId=id
      getFindRight(id).then(response=>{
        console.log(response)
        this.rightHurdleData=response.data
      })
    },
    //查看
    makeExaId(row) {
      let copyDialog = true;
      this.DialogVisibleExamine = copyDialog;
      this.examineData = row;
    },
    //修改
    modifyData(value, MDData) {
      console.log(value, MDData);
      if (value) {
        let id = MDData.id;
        putSTypegroup(id, MDData)
          .then(Response => {
            this.forData(this.currentPage, this.pagesize, this.searchContent);
            this.$message({
              message: "修改成功!",
              type: "success"
            });
          })
          .catch(() => {
            this.$message.error(
              "错误信息：api/admin/baseTenantInformation/${id}！"
            );
          });
      }
    }
  }
};
</script>
